<template>
    <div class="sales-executive-main">
      <title-bar :bar-title="barTitle"></title-bar>

      <div class="sales-executive-body">
        <data-grid :grid-list="executivermanceobjectivesGridList"></data-grid>
      </div>
    </div>
</template>


<script>

import TitleBar from './title-bar';
import { XCircle} from 'vux'
import DataGrid from './data-grid'

export default{
  props:{
    followUpall :{
      default:0
    },

    newThread:{
      default:0
    },

    newClient:{
      default:0
    },

    newAudition:{
      default:0
    },

    clientPercentConversion:{
      default:0
    }
  },

  data () {


    console.log(this.followUpall, 'this.followUpall')

    return {
      barTitle : "销售执行力 (本月)",
      percent: null,
      percentVal: '',
      strokeColor2: '#EA578E',
      target:10000,
      finishedTarget:6020,

      executivermanceobjectivesGridList : []
    }

  },

  methods: {

    isSetTarget: function () {
       return typeof this.target === 'number';
    },

    setDataList () {

      let imgServer = this.$store.state.app.imgServer;

      this.executivermanceobjectivesGridList = [
      {
        icon: imgServer+'followupall.png',
        ttext: '总跟进',
        btext: this.followUpall,
        link: '',
      },

      {
        icon: imgServer+'newthread.png',
        ttext: '新增线索',
        btext: this.newThread,
        link: '',
      },

      {
        icon: imgServer+'newclient.png',
        ttext: '新增客户',
        btext: this.newClient,
        link: '¥3000.00',
      },

      {
        icon: imgServer+'newaudition.png',
        ttext: '新增试听',
        btext: this.newAudition,
        link: '¥3000.00',
      },


      {
        icon: imgServer+'clientpercentconversion.png',
        ttext: '客户转换率',
        btext: this.clientPercentConversion,
        link: '¥3000.00',
      }
      ]
    }

  },

  mounted () {
    this.setDataList();
  },

  components: {
     XCircle,
     TitleBar,
     DataGrid
  },

  watch:{

    followUpall () {
      this.setDataList();
    }
  }
}

</script>


<style lang="less">

  @import "../less/base";

  .sales-executive-body {

    &:extend(.clearfix all);

    padding: 20px 0 0 15px;
    border-bottom: 1px solid #EDEDED;

    @itemSize : 75px;

    .circle-wrapper {

      float: left;
      width:@itemSize;
      height:@itemSize;
      line-height: 12px;
    }


    .target-been-set {

      height: @itemSize;
      display: table;

      .content{
        display: table-cell;
        vertical-align: middle;
        padding-left: 20px;
        font-size: 12px;
        color:#333;


        label{
          display: inline-block;
          width: 50px;
        }

        .finished-target {
          span {
          color:#EA578E;
          }
        }
      }
    }

    .sales-target-body {

      float: left;
      display: inline-block;
      vertical-align: middle;

      .set-target{
        font-size: 14px;
        font-weight: normal;
        color:#23B2E2;
        height:@itemSize;
        line-height: @itemSize;

        .set-target-trig{
        display:inline-block;
        margin-left: 20px;
        }
      }
    }
  }

</style>
